<template>
  <div class="blackIP-chat">
    <affix label="封禁记录"></affix>
    <div class="tool">
      <div class="add-wapper" style="float: left">
        <span @click.stop="reshList" class="creat-text"><i class="iconfont icon-shuaxin"></i><span>{{$t('public.refresh')}}</span></span>
      </div>
      <div class="pag-wapper" style="float: right">
        <pagination
                :small="true"
                :currentPage="currPage"
                :count="count"
                @turnPage="trunPages"
                :totalPage="Math.ceil(count/10)">
        </pagination>
      </div>
    </div>
    <el-table :data="tableData" style="width: 100%" :highlight-current-row="true" :stripe="true" ref="multipleTable" size="mini">
      <template v-for="item in tableHeader">
        <el-table-column
                v-if="item.prop !== ''"
                :prop="item.prop"
                :label="item.label">
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>
<script>
  import affix from '@/components/ui-modules/affix/Affix.vue'
  import Pagination from '@/components/public-modules/card/Pagination'
  import {deepClone} from '@/utils/m7Utils'
  export default {
    name: 'blackIPChat',
    data () {
      return {
        tableData: [],
        tableHeader: [
          {prop: 'sid', label: "访客ID"},
          {prop: 'sName', label: "访客名称"},
          {prop: 'ip', label: "访客IP地址"},
          {prop: 'addBlackCount', label: '封禁次数'},
          {prop: 'applyUntieBlack', label: '是否申请解封'}
        ],
        count: 0,
        currPage: 1
      }
    },
    methods: {
      trunPages (val) { // 翻页
        this.currPage = val
        this.getBlackList()
      },
      reshList () { // 刷新 or 点击查询
        this.currPage = 1
        this.getBlackList()
      },
      getBlackList (currPage) {
        var form = {
          page: this.currPage,
          limit: 10
        }
        this.$store.dispatch('queryBlackIpRangeUser', form).then((resp) => {
          if (resp && resp.success) {
            var dataClone = deepClone(resp.list)
            dataClone.forEach((item, index) => {
              if (item.applyUntieBlack) {
                item.applyUntieBlack = this.$t('public.yes') + '(' + item.applyUntieBlackTime + ')'
              } else {
                item.applyUntieBlack = this.$t('public.no')
              }
            });
            this.tableData = deepClone(dataClone)
            this.count = resp.count
          }
        })
      }
    },
    beforeMount () {
      this.getBlackList()
    },
    components: {
      affix,
      Pagination
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
  .blackIP-chat
    .ui-affix
      padding-bottom 0
      margin-top 30px
    .form-wrap
      margin-bottom 40px
    .submit
      float right
    .padd-r-10
      padding-right 10px
    .bet
      &:before
        content: ''
        display inline-block
        width 15px
        height 1px
        margin 3px 12px
        background $cf-gray5
        text-align center
    .wapper
      display flex
      flex-direction column
    .tool
      border 1px solid #e7e7eb
      border-bottom 0
      padding  8px 0px
      height 30px
      justify-content space-between
    .add-wapper
      line-height 30px
      cursor pointer
      span
        margin-left 5px
    .creat-text
      cursor pointer
      .iconfont,.el-icon-plus
        color $c-main
        font-size 12px
    .del
      color $c-pink
    .icon-disabled
      cursor not-allowed
      .iconfont
        color #9D9B9D
        font-size 12px
</style>